<template>
  <div>
    <h1>新增 {{ user.name }} {{ user.sex }} {{ user.birthday }} {{ user.registTime }}</h1>
    <el-form ref="form" :model="user" label-width="80px">

      <input type="hidden" v-model="user.id">

      <el-form-item label="姓名" label-width="80px">
        <el-col :span="8">
        <el-input  v-model="user.name"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" label-width="80px">
        <el-col :span="8">
        <el-input  v-model="user.password"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" label-width="80px">
        <el-col :span="8">
          <el-radio-group v-model="user.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="出生日期" label-width="80px">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="user.birthday" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="注册日期" label-width="80px">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="user.registTime"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  data() {
    return {
      user: {
        id: '',
        name: '',
        password: '',
        sex: '',
        birthday: '',
        registTime: '',
      }, //声明用户对象，要在当前页面显示
    }
  },
  methods: {
    onSubmit() {
      let vm = this;
      this.axios({
        //后端新增的地址
        url:'http://localhost:9090/springmvc02_war_exploded/vue/insertUser',
        method:'POST',
        data:vm.user,
        transformRequest:[function (data) {
          return Qs.stringify(data)
        }],
      }).then(function (res) {
        if (res.data.code == 0){
          vm.$message.success('添加成功');
          //跳转到用户列表
          vm.$router.push("/Home");
        }
      });
    }
  },
  mounted() {
    let vm = this;
    //  页面挂载时根据ID查询一下用户给user赋值
    this.axios({
      url: 'http://localhost:9090/springmvc02_war_exploded/vue/getUser/' + vm.id,
      method: 'GET',
    }).then(function (res) {
      //查询到的结果 赋值给user对象
      vm.user = res.data.data;
    });
  }
}
</script>

<style scoped>

</style>
